import React, { Component } from "react";
 
class WebMapDemo extends Component {
    constructor(props) {
        super(props);
    }
 
    componentDidMount(){
        
        //eslint-disable-next-line  
        var map = new AMap.Map('container', {
            viewMode: '3D',
            pitch: 50,
            zoom: 11,
            center: [120.542633, 30.048971]
        });
     //eslint-disable-next-line  
        // 设置光照
           //eslint-disable-next-line  
        map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.5);
           //eslint-disable-next-line  
        map.DirectionLight = new AMap.Lights.DirectionLight([0, 0, 1], [1, 1, 1], 1);
     //eslint-disable-next-line  
        var object3Dlayer = new AMap.Object3DLayer();
        map.add(object3Dlayer);
//eslint-disable-next-line  
        new AMap.DistrictSearch({
            subdistrict: 0,   //返回下一级行政区
            extensions: 'all',  //返回行政区边界坐标组等具体信息
            level: 'city'  //查询行政级别为 市
        }).search('柯桥区', function (status, result) {
            var bounds = result.districtList[0].boundaries;
            var height = 5000;
            var color = '#0088ffcc'; // rgba
            //eslint-disable-next-line  
            var prism = new AMap.Object3D.Prism({
                path: bounds,
                height: height,
                color: color
            });
     
            prism.transparent = true;
            object3Dlayer.add(prism);
     //eslint-disable-next-line  
            var text = new AMap.Text({
                text: result.districtList[0].name + '</br>(' + result.districtList[0].adcode + ')',
                verticalAlign: 'bottom',
                position: [120.542633, 30.048971],
                height: 5000,
                style: {
                    'background-color': 'transparent',
                    '-webkit-text-stroke': 'red',
                    '-webkit-text-stroke-width': '0.5px',
                    'text-align': 'center',
                    'border': '1px solid #0088ffcc ',
                    'color': 'white',
                    'font-size': '24px',
                    'font-weight': 600
                }
            });
     
            text.setMap(map);
        });
    }
 
    render() {
        return (
            <div id="container" style ={{width:"100%", height:"80vh"}}>               
            </div>
        );
    }
 
}
 
export default WebMapDemo;
 
